<template>
<div class="hist-hot">
    <div class="history common-style">
        <div class="hd">
            <h4>历史记录</h4>
            <van-icon @click="clearHistory" name="delete-o" />
        </div>
        <div class="bd">
            <van-tag @click="tagClick(item)" plain type="default" v-for="(item,index) in historyKeywordList" :key="index">{{item}}</van-tag>
        </div>
    </div>
    <div class="hot common-style">
        <div class="hd">
            <h4>热门搜索</h4>
        </div>
        <div class="bd">
            <van-tag @click="tagClick(item.keyword)" plain type="default" :class="{red:item.is_hot == 1}" v-for="(item,index) in hotKeywordList" :key="index">{{item.keyword}}</van-tag>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props: ["historyKeywordList","hotKeywordList"],
    data() {
        return {

        }
    },
    methods:{
        async clearHistory(){
            const res = await this.$http.post('search/clearhistory')
            console.log(res);
            if(res.data.errno == 0){
                this.$toast.success('删除成功')
            }
        },
        tagClick(val){
            console.log(val);
            this.$emit('tagClick',val)
        }
    }
}
</script>

<style lang="less" scoped>
.red{
    color: red !important;
}
.common-style {
    padding: .08rem;
    margin-bottom: .20rem;
    background-color: #fff;

    .hd {
        display: flex;
        justify-content: space-between;
        font-size: .23rem;

        h4 {
            font-size: .20rem;
        }
    }

    .bd {

        .van-tag {
            margin-right: .08rem;
            margin-top: .08rem;
            padding: .02rem;
        }
    }
}
</style>
